<template>
  <div id="dataAnalyst">
    <!--上半部分-->
    <div class="page-content-top">
      <div class="status-btn-all">
        <div class="status-btn-all-title">
          <div class="title-style">地震台站</div>
          <div class="title-style">次声台站</div>
          <div class="title-style">水声台站</div>
        </div>
        <div class="status-btn-all-content">
          <div v-for="item in dataList.dataArr" :key="item.name">
            <PIERunStatus class="status-btn"  :options="item" ></PIERunStatus>
          </div>
        </div>
      </div>
      <div class="map">
        <!-- <div class="map-title">
          <div class="map-title-left">
            <div class="map-title-blue"></div>
          </div>
          
        </div> -->
        <div class="map-echarts" id="mychart"></div>
      </div>
    </div>
    <!--下半部分-->
    <div class="page-content-bottom">
      <div class="run-status">
        <div class="run-status-title">任务规划执行状态</div>
        <div class="run-status-table">
          <PIETable
          :data="tableData1"
          :columns="fields"
          :mainTitle="mainTitle"
          class="pie-table"/>
        </div>
      </div>
      <div class="echarts">
        <PIEEchartBox :options="state" class="echarts-pic"/>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { reactive,onMounted } from "vue";
import china  from './china.json';
import * as echarts from "echarts";
import { size } from "lodash";

let mainTitle='任务规划执行状态'
const state = reactive({
   title: {
    //text: 'Referer of a Website',
    //subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'top'
  },
  series: [
    {
      //name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '已完成70%' },
        { value: 200, name: '已完成30%' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ],
});
const dataList = reactive({
  dataArr: [{
    name: "中国",
    status: 1
  },
  {
    name: "韩国",
    status:0
    },
  {
    name: "德国",
    status:0
    },
  {
    name: "英国",
    status:0
    },
  {
    name: "日本",
    status:0
    },
  {
    name: "澳大利亚",
    status:0
    },
  {
    name: "尼日利亚",
    status:0
    },
  {
    name: "格鲁吉亚",
    status:1
    },
  {
    name: "韩国",
    status:0
    },
  {
    name: "中国",
    status:0
    },
  {
    name: "加拿大",
    status:1
    },
  {
    name: "新加坡",
    status:0
    },
    {
    name: "韩国",
    status:0
    },
  {
    name: "中国",
    status:0
    },
  {
    name: "德国",
    status:1
  },

  ]
})
let tableData1 = [
  {
    name: "站台实时监测能力分析",
    status: "关闭",
    load: "20%",
  },
  {
    name: "阈值监测事件预警",
    status: "关闭",
    load: "10%",
  },
  {
    name: "台站质量报告分析",
    status: "关闭",
    load: "10%",
  },
  {
    name: "台站实时监测能力分析",
    status: "关闭",
    load: "10%",
  },
  {
    name: "阈值监测事件预警",
    status: "激活",
    load: "10%",
  },
  {
    name: "台站质量报告分析",
    status: "激活",
    load: "10%",
  },
]; //表格数据
let fields = [
  { label: "配置", prop: "name" },
  {
    label: "状态", prop: "status",
    isTemplate: true
  },
  { label: "负载", prop: "load" },
  { label: "操作", prop:"action"}
  // { label: "操作", prop: "operation"}
]; //表头

onMounted(() => { 
  getEcharts2();
})
const getEcharts2 = () => {
  interface Person {
      [propName: string]: Array<any>;
  }
  //经纬度
  var geoCoordMap:Person = {
      '北京': [116.342178,39.892131],
      '南昌': [115.845451,28.793353],
      '哈尔滨': [126.506684,45.82996],
      '西宁': [101.780717,36.662571],
      '拉萨': [91.101087,29.624621]
  };
  var GZData = [
      [{ name: '北京' }, { name: '北京', value: 70 }],
      [{ name: '北京' }, { name: '南昌', value: 60 }],
      [{ name: '北京' }, { name: '哈尔滨', value: 20 }],
      [{ name: '北京' }, { name: '西宁', value: 25 }],
      [{ name: '北京' }, { name: '拉萨', value: 25 }]
  ];
  var seriesMap = [['北京', GZData]];
  var convertData = function (data:any) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = geoCoordMap[dataItem[0].name];
      var toCoord = geoCoordMap[dataItem[1].name];
      if (fromCoord && toCoord) {
        //cnt定义数量，这里面随意增加自定义属性
        res.push({
          fromName: dataItem[0].name,
          toName: dataItem[1].name,
          cnt:dataItem[1].value,
          coords: [fromCoord, toCoord]
        })
      }
    }
    return res;
  };
  //初始化series
  var color = ['#f2e511', '#ffa022', '#46bee9'];
  var series:Array<any>= [];

        seriesMap.forEach(function (item, i) {
            series.push({
              name: item[0],
              type: 'lines',
              zlevel: 1,
              effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: 'arrow',// 箭头方式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: 8,//箭头大小
                // loop: false
              },
              tooltip : {
                formatter:function (params:any, ticket:any, callback:object) {
                  //鼠标悬浮提示信息获取自定义的结果
                  var htm = `<div><span>出发地：${params.data.fromName}</span>
                          <br><span>目的地：${params.data.toName}</span>
                          <br><span>订单量：${params.data.cnt}</span>
                          </div>`;
                  return htm;
                }
              },
              lineStyle: {
                  normal: {
                      color: color[i],
                      width: 4,//线的宽度
                      opacity: 0.7,
                      curveness: 0.8
                  }
              },
              data: convertData(item[1])
            },
            {
              name: item[0] ,
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                brushType: 'stroke'
              },
              tooltip : {
                formatter:function (params:any, ticket:any, callback:object) {
                  return params.data.name;
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  formatter: '{b}'
                }
              },
              symbolSize: function (val:number) {
                return 12;
              },
              itemStyle: {
                normal: {
                  color: color[i]
                }
              },
              data: item[1].map(function (dataItem:any) {
                return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
              })
            });
        });
        var option  = {
          backgroundColor: 'rgba(15, 49, 112, 0.6)',
          title: {
              text: '当前任务站点分布情况',
              left: 'left',
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
          },
          tooltip : {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            data:[''],
            textStyle: {
                color: '#fff'
            },
            selectedMode: 'single'
          },
          geo: {
              map: 'china',
              center: [108.114129, 28.550339],//地图在正中间显示
              label: {
                normal: {
                  show: false,//是否显示弹框
                  formatter: '{a}',
                  // position: 'inside',
                  backgroundColor: '#fff',
                  padding: [3, 5],
                  borderRadius: 1,
                  borderWidth: 1,
                  borderColor: 'rgba(0,0,0,0.5)',
                  color: '#777'     //弹框文字颜色
                },
                emphasis: {
                }
              },
              selectedMode: 'single',
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: '#06f4ec',  // 地图初始颜色
                  borderColor: '#06f4ec' //地图边界颜色
                },
                emphasis: {
                  areaColor: '#2a333d'  //鼠标经过地图后高亮的颜色
                }
              }
          },
            series: series
        }

        echarts.registerMap('china', china);
        var chart = echarts.init(document.getElementById('mychart'));
        chart.setOption(option);

}

</script>

<style lang="less" scoped>

#dataAnalyst {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin:1%;
  //background-color:;


  .page-content-top{
    display: flex;
    justify-content: space-between;
    height: 49%;
    width: 98%;
    align-items: flex-start;
    padding-bottom: 15px;
    .status-btn-all{
      width: 77%;
      height: 100%;
      background-color: rgba(15, 49, 112, 0.6);
      border: 1px solid rgb(119, 183, 185);
      // display: flex;
      // flex-direction: row;
      // flex-wrap:wrap;
      // justify-content: space-around;
      display: flex;
      flex-direction: column;
      .status-btn-all-title{
        height: 14%;
        display: flex;
        justify-content: space-around;

        .title-style{
          width: 33%;
          font-size: 20px;
          font-weight: 900;
          font-style: oblique;
          letter-spacing: 3px;
          height: 50px;
          line-height: 50px;
          color: white;
          border-bottom: 2px solid #0373A1;
          text-shadow: 0 0 10px #1680d6;
          display: flex;
          justify-content: center;
        }

      }
      .status-btn-all-content{
        height: 85%;
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        justify-content: space-around;

      }

    }
    .map{
      width: 22%;
      height: 100%;
      background-color: rgba(15, 49, 112, 0.6);
      border: 1px solid rgb(119, 183, 185);
      display: flex;
      flex-direction: column;
      .map-echarts{
        height: 100%;

      }


    }

  }
  .page-content-bottom{
    // padding-left: 15px;
    // padding-right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 49%;
    width: 98%;
    .run-status{
      width: 77%;
      height: 100%;
      background-color: rgba(15, 49, 112, 0.6);
      // margin: 6px;
      border: 1px solid rgb(119, 183, 185);
      display: flex;
      flex-direction: column;
      .run-status-title{
        height: 10%;
        font-size: 20px;
        font-weight: 900;
        font-style: oblique;
        letter-spacing: 3px;
        height: 50px;
        line-height: 50px;
        color: white;
        border-bottom: 2px solid #0373A1;
        text-shadow: 0 0 10px #1680d6;
        display: flex;
        justify-content: center;
      }
      .run-status-table{
        margin-right: 15px;
        margin-left: 15px;
        height: 100%;
        width:100%;
        .pie-table {
          height: 100%;
          top: @global-margin;
          left: @global-margin;
        }
      }
    }
    .echarts{
      width: 22%;
      height: 100%;
      background-color: rgba(15, 49, 112, 0.6);
      // margin-top: 6px;
      // margin-right: 6px;
      // margin-bottom: 6px;
      border: 1px solid rgb(119, 183, 185);
      .echarts-pic{
        height: 400px;
        width: 400px;
      }
    }
  }
}
</style>
